<template>
	<!-- 顶部栏 -->
	<view class="top-bar">
		<image class="back-icon" src="/static/全局图标/返回箭头.png" @click="goBack" />
		<view class="top-bar-title">
			<text class="top-bar-title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '主标题'
			}
		},
		methods: {
			goBack() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss">
	.top-bar {
		display: flex;
		align-items: center;
		background-color: #007AFF;
		/* 标题栏的背景颜色 */
		padding: 10px;
		/* 标题栏内边距 */
		position: relative;
		/* 为返回图标定位 */

		.back-icon {
			position: absolute;
			/* 绝对定位返回图标 */
			width: 36px;
			/* 返回图标的宽度 */
			height: 36px;
			/* 返回图标的高度 */
			margin-right: 10px;
			/* 与标题的间距 */
		}

		.top-bar-title {
			font-size: 18px;
			width: 100%;
			/* 占据整个顶部栏的宽度 */
			text-align: center;
			/* 文本居中 */
			color: #fff;
			/* 标题的颜色 */
			font-weight: bold;
		}
	}
</style>